<template>
    <div class="chartsetting">
        <el-card class="box-card">
            <el-button type="primary" @click="add" size="large" class="mb10">添加</el-button>
            <el-table :data="tableData" style="width: 100%" border stripe>
                <el-table-column prop="serial" label="序号" width="180" align="center"> </el-table-column>
                <el-table-column prop="img" label="图片" width="180" align="center">
                    <template slot-scope="scope">
                        <img class="wh100" :src="scope.row.img" alt="" />
                    </template>
                </el-table-column>
                <el-table-column prop="category" label="类别" align="center"> </el-table-column>
                <el-table-column prop="nativeUrl" label="跳转链接" align="center"> </el-table-column>
                <el-table-column prop="level" label="排序" align="center"> </el-table-column>
                <el-table-column label="操作" align="center">
                    <template slot-scope="scope">
                        <el-button type="primary" @click="edit(scope.row)">修改</el-button>
                        <el-button type="primary" @click="dele(scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-card>

        <!-- 修改或者添加Banner信息 -->
        <el-dialog
            v-dialogDrag
            :title="isEditSlide ? '修改Banner信息' : '添加Banner'"
            :visible.sync="dialogVisible"
            width="50%"
            @close="diaClosed"
        >
            <el-form ref="form" :model="form" label-width="80px">
                <el-form-item label="类别">
                    <el-select class="wh180" v-model="form.category" placeholder="请选择类别">
                        <el-option v-for="item in options" :key="item.id" :label="item.name" :value="item.id"> </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="Banner图:" class="por">
                    <img class="wh100 vac" :src="form.img" alt="" />
                    <el-button type="primary" class="fix" @click="$refs.upload.click()" size="large">上传</el-button>
                    <input type="file" ref="upload" id="upload" style="display: none" @change="uploadImg" />
                </el-form-item>
                <el-form-item label="跳转链接:">
                    <el-input v-model="form.nativeUrl"></el-input>
                </el-form-item>
                <el-form-item label="排序:">
                    <el-input v-model="form.level"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button v-if="isEditSlide" type="primary" @click="confirmEdit">确 定</el-button>
                <el-button v-else type="primary" @click="confirmAdd">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import { getSlideList, loadAllType, updateBanner, addBanner, uploadPic, deleBanner } from '@/api/system.js'
export default {
  name: 'chartsetting',
  data () {
    return {
      tableData: [],
      isEditSlide: true,
      dialogVisible: false,
      form: {},
      options: [],
      img: '',
      bannerId: null
    }
  },
  created () {
    this.getSlideList()
    this.loadAllType()
  },
  mounted () {},
  methods: {
    // 获取轮播图列表
    async getSlideList () {
      const { Data } = await getSlideList()
      console.log(Data)
      this.tableData = Data.list
    },

    // 加载所有类别
    async loadAllType () {
      const { Data } = await loadAllType()
      console.log(Data)
      this.options = Data.dictList
    },

    // 修改轮播图
    edit (slideDetail) {
      this.bannerId = slideDetail.id
      this.isEditSlide = true
      this.dialogVisible = true
      this.form = slideDetail
    },

    add () {
      this.isEditSlide = false
      this.dialogVisible = true
    },

    diaClosed () {
      console.log(11)
      this.form = {}
    },

    // 删除轮播图
    async dele (banner) {
      const result = await this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        type: 'warning'
      }).catch((error) => {
        console.log(error)
      })
      console.log(result)
      if (result === 'confirm') {
        const data = await deleBanner({
          id: banner.id
        })
        console.log(data)
        this.getSlideList()
      } else {
      }
    },

    // 上传图片
    upload () {
      console.log(11)
    },

    // 确认修改
    async confirmEdit () {
      const data = await updateBanner({
        id: this.bannerId,
        category: this.form.category,
        img: this.form.img,
        nativeUrl: this.form.nativeUrl,
        level: this.form.level
      })
      if (data.RequestStatus !== 200) return this.$message.error('修改轮播图失败')
      this.$message.success('修改轮播图成功')
      this.dialogVisible = false
      this.getSlideList()
      console.log(data)
    },

    // 确认添加
    async confirmAdd () {
      const { Data } = await addBanner({
        category: this.form.category,
        img: this.form.img,
        nativeUrl: this.form.nativeUrl,
        level: this.form.level
      })
      if (Data.id === '') return this.$message.error('上传失败')
      this.$message.success('添加成功')
      this.dialogVisible = false
      this.getSlideList()
      console.log(Data)
    },

    // 获取被选择的图片
    async uploadImg (e) {
      const file = e.target.files[0]
      if (!file.size) return
      const formData = new FormData()
      formData.append('file', file)
      formData.append('fileCategory', 10)
      const { Data } = await uploadPic(formData)
      console.log(Data)
      this.form.img = 'http://118.31.13.253:810/Upload/' + Data.url
      console.log(this.form.img)
    }
  }
}
</script>

<style scoped>
.wh100 {
    width: 100px;
    height: 100px;
}
.wh180 {
    width: 190px;
    margin-right: 35px;
}
.mb10 {
    margin-bottom: 10px;
}

.el-form {
    display: flex;
    flex-wrap: wrap;
}
.el-form--inline .el-form-item {
    display: flex;
    flex: 70%;
}
.el-form--inline .el-form-item {
    margin-right: 0px;
}
.el-input__inner {
    padding: 0 30px;
}
.el-form-item__content {
    flex: 1;
}
</style>
